<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>精度条</title>
	<style>
		#kuang{
			width: 1000px;
			border: 1px solid blue;
			
		}

		#main{
			background-color: skyblue;
			font-size: 16px;
			color: red;
			font-weight: bold;
			line-height: 30px;
			
		}

	</style>
</head>
<body>
	<div id="kuang">
		<div id="main"></div>
	</div>

	<script>
		timer = setInterval('start()',100);
		//m计数用
		var m = 1;
		//width计算宽度用，算完赋值给main的宽
		var width=10;
		var percent;
		var main = document.getElementById('main');

		main.style.width='100px';
		main.style.height='30px';
		// console.log(main.style.width);

		function start(){
            
            if (m == 100) {
                //清除定时
                clearInterval(timer);
                //改成可以点击
                main.style.width='1000px';
            }
            width = width * m;
            main.style.width = width +'px';
            //百分比
            percent = width/10 + '%';
            main.innerHTML = percent;
            //宽度初始化
            width = 10;
            m++;
        }

	</script>
</body>
</html>